<template>
	<view class="">
		<view class="box">
			<!-- 头部 -->
			<publicHeader></publicHeader>

			<view class="page_main">
				<view class="pt32 pb32 pl30 pr30">
					<view class="swiper_box">
						<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000">
							<swiper-item v-for="item,index in bannerList" :key="index">
								<view class="swiper-item">
									<a :href="item.linkUrl">
										<image :src="item.banner" class="swiper_img"></image>
									</a>

								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="mt45 fs32 lh40 fwb cor_000 tac">CHINA BEAUTY EXPO EXHIBITOR LIST</view>

					<publicNav :tabindex="0"></publicNav>
				</view>

				<view class="re">
					<view class="content_box">
						<view class="re mb24">
							<input type="text" v-model="listForm.fullName" class="w_ipt_01"
								placeholder="PLEASE SEARCH FOR KEYWORDS" placeholder-style="color: #333"
								@confirm="keywordConfirm" />
							<image src="../../static/ic_search.png" class="ic_search_pos"></image>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="exhibitorTypeChange" placeholder="BY SECTORS"
								v-model="listForm.type" dataKey="label" dataValue="value"
								:localdata="typeList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="categoryChange" v-model="listForm.category"
								placeholder="BY CATEGORYS" multiple dataKey="label" dataValue="value"
								:localdata="CatList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="regionsChange" v-model="listForm.country"
								:emptyTips="listForm.type ? 'NO OPTIONS' : 'PLEASE SELECT SECTOR FIRST'"
								placeholder="BY COUNTRYS/REGIONS" multiple dataKey="label" dataValue="value"
								:localdata="areaList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="boothChange" v-model="listForm.boothNumber"
								placeholder="BY HALL" multiple dataKey="label" dataValue="value"
								:localdata="BoothNumberList"></zxz-uni-data-select>
						</view>

						<view class="re mb24">
							<zxz-uni-data-select @change="activityChange" v-model="listForm.activityId"
								placeholder="BY SELECTED EXHIBITOR GROUPS" dataKey="enTitle" dataValue="id"
								:localdata="activityList"></zxz-uni-data-select>
						</view>

						<view class="re mb24 flex_box jcsb">

							<view class="on tags_1" @click="listForm.currentPage = 1,getLists()">SEARCH</view>
							<view class="tags_1" @click="reset()">RESET</view>
						</view>



						<view class="card_list_1">
							<view class="item_card_box" v-for="(item,index) in zhanshangList" :key="index"
								@click="toDetail(item)">
								<view class="flex_box">
									<view class="re mr25">
										<view class="card_img">
											<image
												:src="item.logo + '?x-oss-process=image/auto-orient,1/resize,m_lfit,w_350/quality,q_90' "
												class="img_size" mode="aspectFit"></image>
										</view>
										<view class="card_btn_1" v-if="item.isCollect == 2"
											@click.stop="addZsLike(item)">+ ADD TO MY LISTS</view>
										<view class="card_btn_3" v-if="item.isCollect == 1"
											@click.stop="addZsLike(item)">ADDED</view>
										<view class="card_btn_2">FIND OUT MORE</view>
									</view>
									<view class="item ov">
										<view class="fs28 lh36 fwb cor_000">{{item.enName}}</view>


										<view class="pt15 pb15 fs24 lh32 bb5">
											<view class="re">
												<text class="fwb">SECTORS : </text>
												<text class="" v-if="item.companyType == 1">COSMETICS</text>
												<text class="" v-if="item.companyType == 2">PROFESSIONAL BEAUT</text>
												<text class="" v-if="item.companyType == 3">SUPPLY CHAIN</text>
												<text class="" v-if="item.companyType == 4">SERVICES</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32">
											<view class="re">
												<text class="fwb">CATEGORY : </text>
												<text class=""> {{item.categoryEhName}}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5">
											<view class="re">
												<text class="fwb">COUNTRY/REGION : </text>
												<text class=""> {{item.areaEnName }}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5">
											<view class="re">
												<text class="fwb">HALL NO. :  </text>
												<text class=""> {{ item.showroom }}</text>
											</view>
										</view>

										<view class="pt15 pb15 fs24 lh32 bb5">
											<view class="re">
												<text class="fwb">STAND NO. :  </text>
												<text class=""> {{ item.boothNumber }}</text>
											</view>
										</view>



									</view>
								</view>
							</view>


						</view>

					</view>
					<image src="../../static/ic_bg_1.png" class="page_bg_pos_1"></image>
				</view>

			</view>

			<!-- footer -->
			<publicFooter></publicFooter>




		</view>



	</view>
</template>

<script>
	import zxzUniDataSelect from '@/uni_modules/zxz-uni-data-select/components/zxz-uni-data-select/zxz-uni-data-select.vue'
	import likeMixin from '@/cache/likeMixin';
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getSceneRosterListApi,
		aliTranslateApi,
		getExhibitionBannerListApi,
		getbaseInfoListApi,
		getPageAllProductsApi,
		getBoothNumberListApi,
		getActivityListApi,
		getAreaListApi,
		getAllCategoryListApi,
		getPageListApi,
		getEnExhibitorAdvertApi
	} from '../../http/api.js'

	import {
		getParam
	} from '@/utils/util.js'




	export default {
		mixins: [likeMixin],
		components: {
			popupCheckbox: () => import("@/components/jiangcheng-popupCheckbox/popupCheckbox.vue"),
		},
		data() {
			return {
				firstLoading: true,
				bannerList: [],
				lijieList: [],
				loading: true,
				language: 'en',
				// 参数
				listForm: {
					pageSize: 12, //分页大小
					currentPage: 1, //fenye
					sceneId: 1, //批次
					fullName: '', //搜索词,
					country: '', //国家和地区
					category: '', //品类
					boothNumber: '', //展位号
					activityId: '', //活动ID，
					type: '', //2日化产品 4 专业产品 6 工厂展品 8 服务商产品
				},
				//列表
				zhanshangList: [],
				treeCatList: [],
				swiperDom: '',
				CatList: [],
				options: [],
				list: [],
				BoothNumberList: [],
				activityList: [],
				area: {
					loading: false,
					list: [],
				},
				areaLoading: false,
				areaList: [],

				areaEnNameList: [], //批量翻译地区中文
				typeList: [{
					label: 'COSMETICS',
					value: 2
				}, {
					label: 'PROFESSIONAL BEAUTY',
					value: 4
				}, {
					label: 'SUPPLY CHAIN',
					value: 6
				}, {
					label: 'SERVICES',
					value: 8
				}]


			}
		},
		onLoad() {
			this.getAllCategoryList()
			// console.log(this.$refs, 'this.$refs.popupCheckbox')
			// this.$refs.popupCheckbox.open(); //触发打开弹框
			this.advertGetList();
			this.getCatList();
			this.getActivityList();

		},

		onReachBottom() {
			if (this.firstLoading === false) {
				if (this.listForm.currentPage > this.listForm.totalPages) {
					toast('NO MORE DATA!');
					return;
				} else {
					this.listForm.currentPage = this.listForm.currentPage + 1;
				}
				this.getLists();
			}

		},

		methods: {
			reset() {
				this.listForm.activityId = '';
				this.listForm.boothNumber = '';
				this.listForm.category = '';
				this.listForm.country = '';
				this.listForm.currentPage = 1;
				this.listForm.fullName = '';
				this.listForm.sceneId = 1;
				this.listForm.type = '';
				this.zhanshangList = [];
				this.getLists();
			},
			keywordConfirm(e) {

				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			categoryChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			regionsChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			boothChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			activityChange() {
				let that = this;
				this.listForm.currentPage = 1;
				this.getLists();
			},

			gettasteGroupList() {

				tasteGroupList().then(res => {
					if (res.data.length > 0) {
						res.data.forEach(el => {
							el.disabled = false;
							el.checked = false;
						})
					}
					// console.log("1111");
					this.tasteList = res.data;
					// 调用请求商品详情数据的方法
					if (this.goods.goodsId != null) {
						this.getGoodsDetail(this.goods.goodsId)
					}
				})
			},


			//展商类型变化
			exhibitorTypeChange(e) {

				let that = this;
				this.listForm.currentPage = 1;
				this.listForm.activityId = '';
				this.listForm.boothNumber = '';
				this.listForm.category = '';
				this.listForm.category = '';
				this.getLists();
				this.getAreaList(e.value);
				this.getAllCategoryList(e.value)
			},

			//加入我的收藏

			getActivityList() {
				getActivityListApi({
					type: 1
				}).then(res => {
					let activityNameList = [];
					res.data.forEach(function(item) {
						activityNameList.push(item.title)
					})
					let activityEnNameStr = '';
					let activityEnNameList = [];
					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: activityNameList.join(','),
						targetLanguage: 'en'
					}).then(transRes => {
						console.log(transRes, 'transRes')
						activityEnNameList = transRes.data.split(',')
						activityEnNameList.forEach(function(item, index) {
							res.data[index].enTitle = item;
						})


						this.activityList = res.data;
						this.loading = false;
					});

				})
			},

			areaChange() {
				this.listForm.currentPage = 1;
				this.getLists();
			},
			searchListCz() {
				this.listForm = {
					pageSize: 12, //分页大小
					currentPage: 1, //fenye
					sceneId: 1, //批次
					fullName: '', //搜索词,
					country: '', //国家和地区
					category: '', //品类
					boothNumber: '', //展位号
					activityId: '', //活动ID，
					type: '',
				}
				this.getLists();
			},
			searchList() {
				this.listForm.currentPage = 1;
				this.getLists();
			},

			getAreaList(type) {
				this.areaLoading = true;
				getAreaListApi({
					type: type
				}).then(res => {
					this.area.list = res.data;
					this.area.loading = false;

					let areaList = [];
					res.data.forEach(v => {
						let p = {
							value: v.id,
							label: v.enName?.toUpperCase(),

						}
						areaList.push(p);
						v.childList.forEach(vv => {
							let pp = {
								value: vv.id,
								label: '  ' + vv.enName?.toUpperCase(),
							}
							areaList.push(pp);
							// p.children.push(pp);
						})

					})
					this.areaList = areaList;
					this.areaLoading = false;
					console.log(this.areaList, 'this.areaList')
				})
			},


			getBoothNumberList(sceneId) {
				getBoothNumberListApi({
					sceneId: sceneId
				}).then(res => {
					this.options = res.data;
					let BoothNumberList = [];
					res.data.forEach(function(item) {
						if (item != '云展商' && item != '室外VIP' && item != ' 云展商' && item != '临时') {
							BoothNumberList.push({
								label: item,
								value: item
							})
						}
					})
					this.BoothNumberList = BoothNumberList;
				})
			},

			getAllCategoryList(e) {
				// return false;
				getAllCategoryListApi({
					type: e
				}).then(res => {
					let catList = [];
					res.data.forEach(v => {
						let p = {
							value: v.id,
							label: v.englishName?.toUpperCase(),

						}
						catList.push(p);
						v.childList.forEach(vv => {
							let pp = {
								value: vv.id,
								label: '  ' + vv.englishName?.toUpperCase(),
							}
							catList.push(pp);
							// p.children.push(pp);
						})

					})
					this.CatList = catList;
				})


			},



			advertGetList() {
				getEnExhibitorAdvertApi({}).then(res => {
					this.bannerList = res.data;
				});
			},

			getCatList(e) {
				// alert(1)
				let that = this;
				getbaseInfoListApi({}).then(res => {
					this.lijieList = res.data;
					that.listForm.sceneId = res.data[0]?.id - 0 || 1;
					that.getLists();
					// that.listForm.sceneId = 1;
					that.getBoothNumberList(that.listForm.sceneId);
				}).finally(() => {

				});
			},

			getLists() {
				let that = this;
				let areaZhNameList = [];
				this.loading = true;

				let f = JSON.parse(JSON.stringify(this.listForm));
				if (f.country) {
					f.country = f.country.join(',');
				}
				if (f.category) {
					f.category = f.category.join(',');
				}
				if (f.boothNumber) {
					f.boothNumber = f.boothNumber.join(',');
				}
				f.fullName = this.listForm.fullName
				if (f.type) {
					if (f.type == 2) f.type = 1;
					if (f.type == 4) f.type = 2;
					if (f.type == 6) f.type = 3;
					if (f.type == 8) f.type = 4;
				}

				// this.f.sceneId = 1;
				getPageListApi(f).then(res => {
					setTimeout(function() {
						that.firstLoading = false;
					}, 2000)
					let that = this;
					let zhanshangList = [];

					if (this.listForm.currentPage > 1) {
						zhanshangList = that.zhanshangList;
					}
					res.data.records.forEach(item => {

						let p = item.logo.split(",");
						item.logo = p[0] || '';
						item._id = item.id;
						item.id = item.companyId;
						item.isCollect = this.isLike(item.id) ? 1 : 2;
						item.categoryEhName = item.categoryEhName?.toUpperCase();
						item.areaEnName = item.areaEnName?.toUpperCase()?.replace(/等/g, '');
						item.showroom = item.showroom?.toUpperCase();
						item.boothNumber = item.boothNumber?.toUpperCase();
						zhanshangList.push(item)
					})

					that.zhanshangList = zhanshangList;

					this.loading = false;
				}).finally(() => {
					this.loading = false;
				})
			},


			toDetail(item) {
				// if (item.companyType == '3') {
				// 	uni.navigateTo({
				// 		url: '/pages/brand/factorydetail?id=' + item.companyId
				// 	})
				// } else if (item.type == '3') {

				// }
				uni.navigateTo({
					url: '/pages/Group_page/Group_page?id=' + item.id
				})
			}

		},


	}
</script>

<style>
	.swiper_box {
		position: relative;
		width: 100%;
		height: 184rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper_box .swiper_img {
		position: relative;
		width: 100%;
		height: 184rpx;
	}

	.tags_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 210rpx;
		height: 76rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}

	.on.tags_1 {
		color: #fff;
		background: #A90000;
		border-color: #A90000;
	}

	.page_bg_pos_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 600rpx;
		z-index: 1;
	}

	.content_box {
		position: relative;
		padding: 32rpx 30rpx;
		z-index: 2;
	}

	.w_ipt_01 {
		position: relative;
		display: inline-block;
		padding: 0 24rpx 0 72rpx;
		width: 100%;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 24rpx;
		color: #000;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
		vertical-align: middle;
	}

	.w_select_01 {
		position: relative;
		display: inline-block;
		padding: 0 72rpx 0 24rpx;
		width: 100%;
		height: 80rpx;
		line-height: 78rpx;
		font-size: 24rpx;
		color: #000;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EEEEEE;
		vertical-align: middle;
	}

	.w_select_02 {
		position: relative;
		display: inline-block;
		padding: 0 50rpx 0 16rpx;
		width: 100%;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
		background: #F7F7F7;
		border-radius: 8rpx;
		border: 0;
		vertical-align: middle;
	}

	.ic_search_pos {
		position: absolute;
		top: 50%;
		left: 24rpx;
		width: 32rpx;
		height: 32rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.ic_ipt_arw,
	.ic_ipt_arw_2 {
		position: absolute;
		top: 50%;
		right: 24rpx;
		width: 24rpx;
		height: 24rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.ic_ipt_arw_2 {
		width: 32rpx;
		height: 32rpx;
	}

	.view_opa_pos {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.laber_box {
		position: relative;
		padding: 0 16rpx;
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		color: #666;
	}

	.card_list_1 {
		position: relative;
	}

	.card_list_1 .item_card_box {
		padding: 30rpx 0;
		border-bottom: 1px solid #eee;
	}

	.card_list_1 .item_card_box .card_img {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 252rpx;
		height: 200rpx;
		border: 2px solid #eee;
		border-radius: 8rpx;
		background: #fff;
	}

	.card_list_1 .item_card_box .card_img .img_size {
		position: relative;
		width: 252rpx;
		height: 190rpx;
	}

	.card_btn_1 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #A90000;
		background: #fff;
		border: 2rpx solid #A90000;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	.card_btn_2 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #000;
		background: #F7F7F7;
		border: 2rpx solid transparent;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	.card_btn_3 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
		background: #A90000;
		border: 2rpx solid #A90000;
		border-radius: 8rpx;
		margin-top: 24rpx;
	}

	.popupA {
		width: 100%;
		background-color: #e4e7ed;
		height: 600rpx;

		.popupA_one {
			width: 100%;
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			font-size: 32rpx;
			font-weight: 400;
		}

		.viewscroll {
			.baseone {
				width: 100%;
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.txt {
					font-size: 32rpx;
					font-weight: 400;
				}
			}

		}
	}
</style>